import 'package:erp_widget/src/components/stepper/easy/border.dart';
import 'package:erp_widget/src/components/stepper/easy/item.dart';
import 'package:flutter/material.dart';

class DxEasyBaseStep extends StatelessWidget {
  const DxEasyBaseStep({
    Key? key,
    required this.step,
    required this.isActive,
    required this.isFinished,
    required this.onStepSelected,
    required this.showTitle,
    this.radius = 30,
    required this.activeStepBackgroundColor,
    required this.finishedBackgroundColor,
    required this.unreachedBackgroundColor,
    required this.activeStepBorderColor,
    required this.finishedBorderColor,
    required this.unreachedBorderColor,
    required this.activeTextColor,
    required this.activeIconColor,
    required this.finishedTextColor,
    required this.unreachedTextColor,
    required this.unreachedIconColor,
    required this.finishedIconColor,
  }) : super(key: key);

  final DxEasyStepItem step;
  final bool isActive;
  final bool isFinished;
  final VoidCallback? onStepSelected;
  final double radius;
  final bool showTitle;
  final Color? activeStepBackgroundColor;
  final Color? unreachedBackgroundColor;
  final Color? finishedBackgroundColor;
  final Color? activeStepBorderColor;
  final Color? unreachedBorderColor;
  final Color? finishedBorderColor;
  final Color? activeTextColor;
  final Color? activeIconColor;
  final Color? unreachedTextColor;
  final Color? unreachedIconColor;
  final Color? finishedTextColor;
  final Color? finishedIconColor;

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: showTitle ? radius * 2.5 : radius * 2,
      height: showTitle ? radius * 3.5 : radius * 2,
      child: Column(
        children: [
          Material(
            color: Colors.transparent,
            shape: const CircleBorder(),
            clipBehavior: Clip.antiAlias,
            child: InkWell(
              onTap: onStepSelected,
              canRequestFocus: false,
              radius: radius,
              child: Container(
                width: radius * 2,
                height: radius * 2,
                decoration: BoxDecoration(
                  shape: BoxShape.circle,
                  color: isFinished
                      ? finishedBackgroundColor ?? Colors.black
                      : isActive
                          ? activeStepBackgroundColor ?? Colors.green
                          : unreachedBackgroundColor ?? Colors.transparent,
                ),
                alignment: Alignment.center,
                child: DxEasyStepBorder(
                  borderType: DxEasyStepBorderType.none,
                  color: isActive
                      ? activeStepBorderColor ?? Colors.white
                      : isFinished
                          ? finishedBorderColor ?? Colors.transparent
                          : unreachedBorderColor ?? Colors.grey.shade400,
                  strokeWidth: 0.8,
                  child: SizedBox(
                    width: radius * 2,
                    height: radius * 2,
                    child: Center(child: _buildIcon()),
                  ),
                ),
              ),
            ),
          ),
          if (showTitle) const SizedBox(height: 10),
          if (showTitle)
            SizedBox(
              width: radius * 2.5,
              child: Text(
                step.title ?? '',
                maxLines: 2,
                textAlign: TextAlign.center,
                style: Theme.of(context).textTheme.bodyMedium!.copyWith(
                      color: isActive
                          ? activeTextColor ?? Colors.green
                          : isFinished
                              ? finishedTextColor ?? Colors.black
                              : unreachedTextColor ?? Colors.grey.shade400,
                      height: 1,
                      fontSize: radius * 0.55,
                    ),
              ),
            ),
        ],
      ),
    );
  }

  Widget _buildIcon() {
    if (isActive) {
      return step.activeIconWidget != null
          ? step.activeIconWidget!
          : Icon(
              step.activeIcon != null ? step.activeIcon!.icon : step.icon!.icon,
              size: radius * 1.1,
              color: isActive ? activeIconColor ?? Colors.white : unreachedIconColor ?? Colors.grey.shade400,
            );
    }
    if (isFinished) {
      return step.finishIconWidget != null
          ? step.activeIconWidget!
          : Icon(
              step.finishIcon != null ? step.finishIcon!.icon : step.icon!.icon,
              size: radius * 1.1,
              color: isFinished ? finishedIconColor ?? Colors.white : unreachedIconColor ?? Colors.grey.shade400,
            );
    }

    return step.iconWidget != null
        ? step.iconWidget!
        : Icon(
            step.icon!.icon,
            size: radius * 1.1,
            color: Colors.grey.shade400,
          );
  }
}
